<script lang="ts" setup>
import { ref } from 'vue';
import type { FormInstance } from '@arco-design/web-vue/es/form';
import { $fetch } from '@/settings/utils/fetch';
import useNotification from '@/settings/hooks/notification';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';

const props = defineProps({
  id: {
    type: String,
    default: '',
  },
});

const loading = ref(false);
const formData = ref({
  columnName: '',
  columnDescribe: '',
  coverUrl: '',
  displayOrder: 0,
});
const formRef = ref<FormInstance>();
const router = useRouter();
const { success } = useNotification();
const { t } = useI18n();

const save = async () => {
  const { isSuccess } = await $fetch(props.id ? '/admin/atomgitPopSpecialColumn/update' : '/admin/atomgitPopSpecialColumn/add', {
    method: 'post',
    data: {
      columnId: props.id,
      ...formData.value,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    success(t('settings.notification.success'));
    router.push('/direction/column/listing/index');
  }
};

const submit = async () => {
  const res = await formRef.value?.validate();

  if (res) {
    return;
  }

  save();
};

const getDetail = async () => {
  const { isSuccess, data } = await $fetch('/admin/atomgitPopSpecialColumn/getColumnDetail', {
    method: 'post',
    data: {
      columnId: props.id,
    },
    loadingStatus: loading,
  });

  if (isSuccess) {
    formData.value = {
      columnName: data.columnName,
      columnDescribe: data.columnDescribe,
      coverUrl: data.coverUrl,
      displayOrder: data.displayOrder,
    };
  }
}

const init = () => {
  if (props.id) {
    getDetail();
  }
}

init();
</script>

<template>
  <OpenPageSection>
    <OpenGeneralCard>
      <AForm ref="formRef" auto-label-width scroll-to-first-error :model="formData" @submit="submit">
        <AFormItem :label="$t('settings.view.column.listing.add.colum1')" field="columnName" :rules="[{ required: true, message: $t('settings.notification.required') }, { maxLength: 150 }]">
          <AInput v-model="formData.columnName" :max-length="150" allow-clear show-word-limit />
        </AFormItem>

        <AFormItem :label="$t('settings.view.column.listing.add.colum2')" field="columnDescribe" :rules="[{ required: true, message: $t('settings.notification.required') }]">
          <AInput v-model="formData.columnDescribe" allow-clear />
        </AFormItem>

        <AFormItem :label="$t('settings.view.column.listing.add.colum3')" field="coverUrl" :help="$t('settings.view.column.listing.add.tips1')">
          <OpenUpload v-model="formData.coverUrl" />
        </AFormItem>

        <AFormItem :label="$t('settings.view.column.listing.add.colum4')" field="displayOrder" :rules="[{ required: true, message: $t('settings.notification.required') }]">
          <AInputNumber v-model="formData.displayOrder" :default-value="0" allow-clear show-word-limit mode="button" />
        </AFormItem>

        <AFormItem>
          <ASpace>
            <OpenRouterButton to="/direction/column/listing/index">{{ $t('settings.action.goBack') }}</OpenRouterButton>
            <AButton html-type="submit" type="primary" :loading="loading">{{ $t('settings.action.submit') }}</AButton>
          </ASpace>
        </AFormItem>
      </AForm>
    </OpenGeneralCard>
  </OpenPageSection>
</template>

<style lang="scss" scoped>
</style>
